<template>
<div class="content_box">
  <!-- 栏目 -->
  <div class="lanmu_box">
   <div class="box">
     <van-tabs v-model="active" @change="tabChange">
       <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
     </van-tabs>
   </div>
  </div>

   <div class="list_box" v-if="list.length">
     <div @click="toXq(item.id)" class="box" v-for="(item,index) in list" :key="index">
       <div :class="item.orderTotalState==1||item.orderTotalState==0?'':'on'">
        <div class="status">
         <div class="jjz">
           <div class="num">
             <img src="/static/images/order_icon1.png" alt="">
             <p class="orderId">订单号：{{item.orderCode}}</p>
             <p class="sjx">的</p>
           </div>
            <p class="sbx" v-if="item.orderTotalState==1"><span>使用中<van-icon name="arrow" /></span></p>
            <p class="sbx sbx_on" v-else-if="item.orderTotalState==0"><span>已预约<van-icon name="arrow" /></span></p>
            <p class="sbx" v-else-if="item.orderTotalState==2"><span>已完成<van-icon name="arrow" /></span></p>
            <p class="sbx" v-else-if="item.orderTotalState==3"><span>已取消<van-icon name="arrow" /></span></p>
            <p class="sbx" v-else-if="item.orderTotalState==4"><span>待付款<van-icon name="arrow" /></span></p>
            <p class="sbx" v-else-if="item.orderTotalState==5"><span>正在付款<van-icon name="arrow" /></span></p>
            <p class="sbx" v-else-if="item.orderTotalState==6"><span>提前取消<van-icon name="arrow" /></span></p>
            <p class="sbx" v-else-if="item.orderTotalState==7"><span>提前结束<van-icon name="arrow" /></span></p>
            <p class="sbx" v-else-if="item.orderTotalState==8"><span>平台退款<van-icon name="arrow" /></span></p>
         </div>
       </div>
       <div class="room_msg">
         <div class="msg">
           <div class="room">
              <img src="/static/images/order_icon2.png" alt="">
              <div>
                <p class="name">{{item.roomName}}</p>
                <p class="text">{{!item.roomIlk?'预定桌台':'预定房间' }}</p>
              </div>
           </div>
           <div class="room">
            <img src="/static/images/order_icon3.png" alt="">
              <div>
                <p class="name">￥{{item.realPrice}}</p>
                <p class="text">实际支付</p>
              </div>
           </div>
         </div>
       </div>
       <div class="list_msg">
         <div class="list">
           <p class="title">开始时间</p>
           <p class="text">{{item.startTime}}</p>
         </div>
         <div class="list on">
           <p class="title">结束时间</p>
           <p class="text">{{item.endTime}}</p>
         </div>
         <div class="list on">
           <p class="title">支付方式</p>
           <p class="text">[{{item.payType == 1?'余额支付':item.payType == 2?'美团验券':item.payType == 3?'抖音验券':item.payType == 4?'卡券兑换':'微信支付'}}] ￥{{item.realPrice}}</p>
         </div>
         <div class="list">
           <p class="title">下单时间</p>
           <p class="text">{{item.createTime}}</p>
         </div>
         <div class="xufei" v-if="item.reorderList && item.reorderList.length">
           <div class="x_nr" v-for="(child,i) in item.reorderList" :key="i">
             <div v-if="child.payType == 5 || child.payType == 6">
                <p>续单类型</p>
                <p class="yyy" v-if="child.payType == 5">商家赠与</p>
                <p class="yyy" v-else-if="child.payType == 6">加时卡</p>
                <p class="yyy" v-else>微信/余额</p>
              </div>
             <div>
                <p>续单状态</p>
                <p class="yyy" v-if="child.orderTotalState == 0">已预约</p>
                <p class="jxz" v-if="child.orderTotalState == 1">进行中</p>
                <p class="ywc" v-if="child.orderTotalState == 2">已完成</p>
                <p class="ytk" v-if="child.orderTotalState == 3">已退款</p>
             </div>
             <div>
                <p>续单时长</p>
                <p>{{child.reorderHour}} <span v-if="child.payType != 5">￥{{child.realPrice}}</span></p>
             </div>
             <div>
               <p>续单编号</p>
               <p>{{child.orderCode}}</p>
             </div>
             <div>
               <p>续单时间</p>
               <p>{{child.finishPayTime}}</p>
             </div>
             <p @click.stop="cancelOrder(child.id)" class="anniu" v-if="child.orderTotalState == 0 && child.payType != 5 && child.payType != 6">退款</p>
           </div>
         </div>
       </div>
       <!-- <blcok v-if="item.payType != 2"> -->
          <!-- 使用中 -->
          <div :class="item.reorderList && item.reorderList.length?'button_box on1':'button_box'" v-if="item.orderTotalState==1">
            <p @click.stop="toXq(item.id)">使用加时卡</p>
            <p @click.stop="toXudan(item)" class="xd">续单</p>
            <p @click.stop="openDoor(item.id,item.roomIlk)">{{!item.roomIlk?'立即开台':'打开房间' }}</p>
          </div>

          <!-- 预约中 -->
          <div :class="item.reorderList && item.reorderList.length?'button_box on1':'button_box'" v-if="item.orderTotalState==0">
            <p @click.stop="toGiveFriends(item.id)">转赠订单</p>
            <p @click.stop="cancelOrder(item.id)" v-if="item.payType == 0 || item.payType == 1">取消订单</p>
            <p @click.stop="openDoor(item.id,item.roomIlk)" class="xd">{{!item.roomIlk?'立即开台':'打开房间' }}</p>
          </div>
       </div>

        <!-- 好评返现 -->
        <div style="justify-content:flex-end" class="button_box" v-if="(item.payType == 2 || item.payType == 3) && item.orderTotalState==2">
          <p @click.stop="toPinglun(item)" class="xd" v-if="item.rebate">好评返现</p>
          <p class="xd on" v-else>好评返现</p>
        </div>
       <!-- </blcok> -->
     </div>

   </div>
   <div class="no_data" v-else>
     <img mode="widthFix" src="/static/images/components/no_order.png" alt="" />
      <!-- <p class="text"></p> -->
   </div>

    <!-- <ui-tab-bar :tabBarIndex="1"></ui-tab-bar> -->
 </div>
</template>

<script>
import { 
  getToken,
  getUserPhone
} from "@/utils/auth";
import { 
 myOrderPage,
 startBack,
 orderUnLock
} from "@/api/index";
import { mapState } from 'vuex'
import { Debounce } from "@/utils/index";
export default {
 computed: {
   ...mapState(['user']),
 },
 data() {
   return {
     lanmu:[
       {name:'全部',query:''},
       {name:'进行中',query:1},
       {name:'预约中',query:0},
       {name:'已完成',query:2},
       {name:'已取消',query:3}
     ],
     lanmuIndex:0,
     param:{
       current:1,
       size:3,
       query:''
     },
     list:[],
     orderId:'',
     disable:false,
     active: 0,
     isOpen:false
   };
 },
 computed: {
    ...mapState({
      storeId: state => state.user.storeId,
    })
  },
 methods: {

    // 跳转评论
    toPinglun(item){
      //console.log(item)
      let data = {
        orderId:item.id,
        roomName:item.roomName,
        payType:item.payType
      }
      wx.navigateTo({
        url: `/pages/pinglun/main`,
      });
    },

    // 点击分享
    shareHy(id){
      this.orderId = id
    },

   // 算选择多少小时
    getHour(s1, s2) {
      var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
      s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'));
      s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'));
      var ms = s2.getTime() - s1.getTime();
      if (ms < 0) return 0;
      return ms / 1000 / 60 / 60;  //小时
    },

    // 转赠订单
    toGiveFriends(orderId){
      wx.navigateTo({
        url: `/pages/giveFriends/main?orderId=${orderId}`
      });
    },

    // 跳转续单
    toXudan(item){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      let timeLength = this.getHour(item.startTime,item.endTime)
      
      let info = {
        endTime:item.endTime,
        orderId:item.id,
        price:item.price,
        roomId:item.roomId,
        roomName:item.roomName,
        serviceTime:timeLength,
        startTime:item.startTime
      }
      //console.log(info)
      info.endTime = info.endTime.replace(/-/g, '/')
      info.startTime = info.startTime.replace(/-/g, '/')
      wx.navigateTo({
        url: `/pages/renewalOrder/main?info=${JSON.stringify(info)}`,
      });
    },
    

    // 开门
    openDoor:Debounce(function (orderId,roomIlk) {
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      if(!this.isOpen){
        this.isOpen = true
        this.$showLoading(!roomIlk?'开台中...':'开门中...')
        orderUnLock({orderId}).then(res=>{
          if(res.statusCode == '00000'){
            this.isOpen = false
            wx.hideLoading()
            this.$toast(!roomIlk?'开台成功':'开门成功')
          }else{
            this.isOpen = false
            wx.hideLoading()
            this.$toast(res.message)
          }
        })
        setTimeout(() => {
          
        }, 2000);
      }
    },300),

    // 取消订单
    cancelOrder(orderId){
      wx.navigateTo({
        url: `/pages/refund/main?orderId=${orderId}`,
      });
    },

   //订单列表
    getList(state){
      this.$showLoading('加载中...')
      myOrderPage(this.param).then(res=>{
        if(res.statusCode == '00000'){
          if(this.param.current != 1 && !res.data.records.length){
            wx.showToast({
              title: '已经到底了~',
              icon: 'none',
              duration: 1500
            })
            return
          }
          if(state){
            this.list = []
          }
          res.data.records.forEach(item=>{
            if (item.reorderList && item.reorderList.length) {
              item.reorderList.forEach(child => {
                if (child.reorderMinute >=60) {
                  child.reorderHour = (child.reorderMinute / 60).toFixed(1) + '小时'
                } else {
                  child.reorderHour = child.reorderMinute + '分钟'
                }
              });

            }
          })
          this.list = this.list.concat(res.data.records)
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }
      })
    },

   // 订单状态切换
   tabChange(e){
     //console.log(e)
     let index = e.mp.detail.index
     this.param.current = 1
     this.param.query = this.lanmu[index].query
     this.getList(true)
     wx.vibrateShort({type:'heavy'});
   },

   // 跳转详情
   toXq(orderId){
    if(!getUserPhone()){
      wx.navigateTo({
        url: '/pages/authorization/main',
      });
      return
    }
    wx.navigateTo({
      url: `/pages/order_xq/main?orderId=${orderId}`,
    });
  },

 },
 onShow(){
  this.param.current = 1
  this.getList(true)
 },
 onLoad(options) {
 },

  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.param.current = 1
    this.param.size = 10
    this.getList(true)
  },

 // 上拉加载
 onReachBottom(){
   //console.log('到底了')
   this.param.current += 1
   this.getList()
 },

 onUnload(){
 },
 onTabItemTap(){
   wx.vibrateShort({type:'heavy'});
 }
};
</script>

<style lang="scss" scoped>
.content_box {
 min-height: 100vh;
 background: #F5F5F5;
 padding-bottom:30rpx;
 .lanmu_box{
   height: 88rpx;
   margin-bottom:24rpx;
   .box{
     position: fixed;
     top:0;
     width: 100%;
     z-index: 100;
     background: #fff;
   }
   /deep/ .van-tab{
     color:#666666;
     font-size:30rpx;
   }
   /deep/ .van-tabs__line{
     background: #00C200;
   }
   /deep/ .van-tab--active{
     color:#00C200;
     font-weight: bold;
   }
 }
 .list_box{
   width: 92%;
   margin:0 auto;
   .box{
     border-radius: 16rpx;
     margin-bottom:24rpx;
     box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
     .jjz{
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       position: relative;
       .num{
         width: 64%;
         height: 60rpx;
         padding:13rpx 0 0rpx 30rpx;
         background: #fff;
         display: flex;
         align-items: center;
         position: relative;
         z-index: 10;
         font-size:28rpx;
         font-weight: 500;
         color:#111;
         border-top-left-radius: 16rpx;
         img{
           width: 30rpx;
           height:36rpx;
           margin-right:10rpx;
         }
         .orderId{
           width: 100%;
           overflow:hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
         }
         .sjx{
           position: absolute;
           width: 20rpx;
           height: 60rpx;
           padding:20rpx 0 0rpx 30rpx;
           text-align: center;
           z-index: 10;
           right:-35rpx;
           top:0;
           color:#fff;
           font-size: 0rpx;
           &::before{
             content:'';
             position:absolute;
             top:0;
             right:0;
             bottom:0;
             left:0;
             background: #fff;
             transform: skew(25deg);
             color:#aaa;
             border-top-right-radius: 15rpx;
           }
         }
       }
       .sbx{
         position: relative;
         width: 190rpx;
         height: 58rpx;
         line-height: 58rpx;
         text-align: center;
         z-index: 5;
         right:15rpx;
         &::before{
           content:'';
           position:absolute;
           top:0rpx;
           right:15rpx;
           bottom:0;
           left:0;
           background: #F04925;
           transform: skew(25deg);
           color:#aaa;
           border-top-right-radius: 15rpx;
         }
         span{
           position: relative;
           z-index: 100;
           color:#fff;
           font-size:26rpx;
           font-weight: 500;
           margin-left:15rpx;
         }
         &.sbx_on{
           &::before{
             background: #FF8515;
           }
         }
       }
     }
     .room_msg{
       background: #fff;
       padding-top:24rpx;
       padding-bottom:24rpx;
       
       .msg{
        background: linear-gradient(158deg, #D6FFD6 0%, #FFFFFF 28%, #D8FFD8 100%, #88F388 100%);
         height: 176rpx;
         margin:0 26rpx;
         display: flex;
         align-items: center;
         justify-content: space-around;
         text-align: center;
        position: relative;
        border-radius: 16rpx;
        .room{
          position: relative;
          z-index: 10;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: left;
          img{
            width: 90rpx;
            height: 111rpx;
            margin-right:16rpx;
          }
        }
         .name{
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
           margin-bottom:12rpx;
         }
         .text{
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999999;
         }
       }
     }
     .list_msg{
       color:#666666;
       background: #fff;
       .list{
        .title{
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #666666;
        }
        .text{
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #111111;
        }
         padding:0 26rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding-bottom:32rpx;
         font-size:28rpx;
         &:last-child{
           padding-bottom:20rpx;
         }
       }
       &.on{
         color:#979797;
         border-bottom-right-radius: 15rpx;
         border-bottom-left-radius: 15rpx;
       }
     }
      .xufei{
        margin:0 26rpx;
        padding-bottom:20rpx;
        border-top:1px solid #F2F1F4;
        .x_nr{
          padding-bottom:20rpx;
          border-bottom:1px solid #F2F1F4;
          padding-top:32rpx;
          &:last-child{
            border-bottom: none;
          }
          div{
            display:flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom:32rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #666666;
            .yyy{
              color:#FF8515
            }
            .jxz{
              color:#00C200
            }
            .ywc{
              color:#666666;
            }
            .ytk{
              color:#666666;
            }
            &:last-child{
              padding-bottom:0;
            }
          }
        }
        .anniu{
          width: 136rpx;
          height: 48rpx;
          line-height: 48rpx;
          border: 2rpx solid #D6D6D6;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #111111;
          border-radius: 50rpx;
          text-align: center;
          margin-left:auto;
        }
      }
     
     .button_box{
       display: flex;
       gap: 20rpx;
       padding:0 26rpx 26rpx 26rpx;
       background: #fff;
       border-bottom-left-radius: 16rpx;
       border-bottom-right-radius: 16rpx;
       padding-top:32rpx;
       &.on1{
        box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(0,0,0,0.08);
        }
       p{
         width: 196rpx;
         height: 64rpx;
         line-height: 64rpx;
         font-size:28rpx;
         border: 1px solid #00C200 !important;
         border-radius: 6rpx;
         text-align: center;
         border-radius: 50rpx;
         color:#00C200;
       }
       button::after {
         border: none;
       }
       button{
         width: 196rpx;
         height: 64rpx;
         line-height: 64rpx;
         font-size:28rpx;
         border: 2rpx solid #00C200;
         border-radius: 50rpx;
         text-align: center;
         background: #fff;
         color:#00C200;
         margin:0;
       }
     }
     .status1{
       background: #fff;
       padding:26rpx 26rpx 0 26rpx;
       border-top-left-radius: 15rpx;
       border-top-right-radius: 15rpx;
       p{
         display: inline-block;
         padding:8rpx 18rpx;
         background: #f0f0f0;
         font-size:28rpx;
         color:#9a9a9a;
       }
     }
     .name_box{
        font-size:32rpx;
        color:#9a9a9a;
        font-weight: bold;
        padding:0 26rpx;
        background: #fff;
        padding-top:20rpx;
        padding-bottom:26rpx;
        p{
          padding-bottom:24rpx;
          border-bottom:1px solid #f7f7f7;
        }
     }
     .on{
       filter: grayscale(100%);
       .orderId{
         color:#9A9A9A;
       }
       .msg{
         color:#9A9A9A;
         .name{
           color:#9A9A9A;
         }
       }
       .list_msg{
         color:#9A9A9A;
       }
       .msg{
         background: #F2F2F2;
       }
     }
   }
 }
 .no_data{
   text-align: center;
   font-size:28rpx;
   color:#333;
   padding-top:150rpx;
   .text{
     font-weight: bold;
     color:#999;
   }
   img{
     width: 248rpx;
     margin-bottom:10rpx;
   }
   .button{
     width: 240rpx;
     height: 70rpx;
     line-height: 70rpx;
      background: #02b4ae;
     // background: #35c982;
     border-radius: 120rpx;
     text-align: center;
     font-size: 30rpx;
     color: #fff;
     margin-top: 30rpx;
     margin: 30rpx auto 0 auto;
   }
 }
}
</style>